<script lang="ts" setup>
defineOptions({
  name: 'mainView',
})
</script>

<template>
  <section class="main-view">
    <main class="main-view-main">
      <router-view v-slot="{Component}">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </main>
  </section>
</template>

<style lang="scss" scoped>
.main-view {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .main-view-main {
    width: 100%;
    height: calc(100%);
    background-color: var(--header-color);
  }
}
</style>
